<template>
  <div class="my-music">
    <div class="album-slide">
      <div class="album-img">
        <img :src="attachImageUrl(avator)">
      </div>
      <ul class="album-info">
        <li>昵称:{{username}}</li>
        <li>地区：{{location}}</li>
        <li>职业：{{profession}}</li>
        <li>上传识别次数：{{identifyCount}}次</li>
        <li>纠错次数：{{correctCount}}</li>
      </ul>
    </div>
    <div class="album-content">
      <div class="album-title">
        <!--地区：{{introduction}}-->
      </div>
      <div class="songs-body">
        <album-content :songList="collectList">
          <template slot="title">我的记录</template>
        </album-content>
      </div>
    </div>
  </div>
</template>

<script>
  import {mixin} from '../mixins';
  import {mapGetters} from 'vuex';
  import {getUserOfId, getCollectOfUserId} from '../api/index';
  import AlbumContent from "../components/AlbumContent";

  export default {
    name: 'MyConsole',
    mixins: [mixin],
    components: {
      AlbumContent
    },
    data() {
      return {
        avator: '',       //用户头像
        username: '',     //昵称
        location: '信息未完善',
        profession: '信息未完善',
        identifyCount: 0,
        harvestCount: 0,
        correctCount: 0,
        collection: [],     //收藏的歌曲列表
        collectList: []    //收藏的歌曲列表（带歌曲详情）
      }
    },
    computed: {
      ...mapGetters([
        'listOfSongs',      //当前播放列表
        'userId',           //当前登录用户id
      ])
    },
    mounted() {
      this.getMsg(this.userId);
      this.getCollection(this.userId);
    },
    methods: {
      getMsg(userId) {
        getUserOfId(userId)
          .then(res => {
            this.avator = '/consumer/get_pic/' + userId;
            this.username = res.data.username;
            if (res.data.location != null) {
              this.location = res.data.location;
            }
            if (res.data.profession != null) {
              this.profession = res.data.profession;
            }
            // this.identifyCount = res.data.identifyCount;
            if (res.data.identifyCount != null) {
              this.identifyCount = res.data.identifyCount;
            }
            if (res.data.correctCount != null) {
              this.correctCount = res.data.correctCount;
            }
          })
          .catch(err => {
            console.log(err);
          })
      },
      //获取我的记录列表
      getCollection(userId) {
        getCollectOfUserId(userId)
          .then(res => {
            this.collection = res;
            //通过歌曲id获取歌曲信息
            for (let item of this.collection) {
              this.getSongsOfIds(item.songId);
            }
          })
          .catch(err => {
            console.log(err);
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../assets/css/my-music.scss';
</style>
